<template>
	<div class="dynamic-wrapper">
		<my-c-divider :borderd="false" hint="知名设计大师集合" title="家居设计师"/>
		<div class="designers">
			<div class="designer-container">
				<div class="designers-items" :style=" 'width:' + '70' * imgs.length + 'px;'">
					<div class="designers-item" v-for="(item, index) in imgs,username, country" :key="index">
						<img :src="imgs[index]" alt="img"/>
						<div class="designer-name">{{username[index]}}</div>
						<div class="designer-region">{{country[index]}}</div>
					</div>
				</div>
			</div>
		</div>
		<my-c-divider :borderd="false" hint="热门动态" title="达人经验分享"/>
		<div
				class="userinfo-all"
				v-for="(item, index) in imgs,username,info,userMessage,infotext"
				:key="index"
		>
			<div class="userinfo">
				<div class="left">
					<img :src="imgs[index]" class="user"/>
					<div class="info">
						<div class="up">{{username[index]}}</div>
						<div class="down">刚刚</div>
					</div>
				</div>
				<div class="right">
					<div class="part">
						<div class="right-text">{{info[index][0]}}</div>
						<img class="right-img" :src="infoimg[0]"/>
					</div>
					<div class="part">
						<div class="right-text">{{info[index][1]}}</div>
						<img class="right-img" :src="infoimg[1]"/>
					</div>
				</div>
			</div>
			<div class="message-text">{{infotext[index]}}</div>
			<div class="message-img">
				<img :src="userMessage[index][0]" class="m-left"/>
				<img :src="userMessage[index][1]" class="m-right"/>
			</div>
		</div>
		<my-footer/>
	</div>
</template>

<script>
import MyCDivider from "@/pages/components/public/MyCDivider.vue";
import MyFooter from "@/pages/components/public/MyFooter";

export default {
	components: {
		MyCDivider,MyFooter
	},
	data() {
		return {
			imgs: [
				'https://forum.alexs.fun/hsr/1.png',
				'https://forum.alexs.fun/hsr/2.png',
				'https://forum.alexs.fun/hsr/3.png',
				'https://forum.alexs.fun/hsr/4.png',
				'https://forum.alexs.fun/hsr/5.png',
				'https://forum.alexs.fun/hsr/6.png',
				'https://forum.alexs.fun/hsr/7.png',
				'https://forum.alexs.fun/hsr/8.png',
			],
			username: ["智慧的小千库", "爱神小丘比", "小孩纸", "家具智慧"],
			country: ["中国", "爱尔兰", "美国", "荷兰"],
			info: [
				[220, 450],
				[560, 665],
				[220, 450],
				[560, 665]
			],
			userMessage: [
				['https://forum.alexs.fun/hsr/7.png', 'https://forum.alexs.fun/hsr/8.png'],
				['https://forum.alexs.fun/hsr/7.png', 'https://forum.alexs.fun/hsr/8.png'],
				['https://forum.alexs.fun/hsr/7.png', 'https://forum.alexs.fun/hsr/8.png'],
				['https://forum.alexs.fun/hsr/7.png', 'https://forum.alexs.fun/hsr/8.png']
			],
			infotext: [
				"如何进行古典风的家居搭配装饰",
				"喜欢的家居装潢灵感来自这里",
				"如何进行古典风的家居搭配装饰",
				"喜欢的家居装潢灵感来自这里"
			],
			infoimg: ['https://forum.alexs.fun/hsr/5.png', 'https://forum.alexs.fun/hsr/6.png']
		};
	}
};
</script>

<style>
	.dynamic-wrapper {
		padding: 10px;
	}
	.my-divider-title {
		text-align: left !important;
		margin-left: 0 !important;
	}
	.designers {
		width: 100%;
		height: 160px;
		overflow-x: scroll;
		overflow-y: hidden;
	}
	.my-divider {
		display: flex !important;
		justify-content: center !important;
	}
	.designers-items {
		width: 100%;
		overflow-x: auto;
		overflow-y: hidden;
	}
	.designers-item {
		width: 120px;
		height: 120px;
		float: left;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin: 10px;
		border-radius: 15px;
		background-color: #f4f4f4;
	}
	.designers-item img {
		border-radius: 50% !important;
		width: 60px !important;
		height: 60px !important;
		margin: 0 auto;
	}
	.designer-name {
		padding: 5px 0;
	}
	.designer-region {
		color: gray;
	}
	.userinfo-all {
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.userinfo {
		width: 100%;
		height: 100px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.left {
		display: flex;
		align-items: center;
	}
	.user {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		margin-right: 10px;
	}
	.down {
		color: gray;
		text-align: left !important;
	}
	.right {
		width: 100px;
		height: 50px;
	}
	.message-text {
		font-size: 20px !important;
		text-align: left !important;
	}
	.message-img {
		display: flex;
	}
	.m-left {
		width: 45%;
		height: 100px;
		margin: 5px;
	}
	.m-right {
		width: 45%;
		height: 100px;
		margin: 5px;
	}
	.right {
		display: flex;
	}
	.right-text {
		font-size: 7px;
		text-align: right;
	}
	.right-img {
		margin-right: 10px !important;
	}
</style>